<template>
	<view class="" style="display: flex; flex-direction: column;">
		<!-- <u-navbar :is-back="false" back-text=" " :title-color="style.color5" :background="{background:style.color2}" :title-size="30" :title-width="400" title="分类"></u-navbar> -->
		<view class="classification_box">
			<view class="classification_left">
				<view @click="chooseItem(index)" :class="item.isChoose?'choose':''" v-for="(item,index) in classification" :key="index" class="classification_left_item ">
					<span class="classification_left_title">{{item.name}}</span>
					<view class=""  :class="item.isChoose?'bian':''"></view>
				</view>
			</view>
			<view   class="classification_right">
				<view class="classification_right_img">
					<image src="../../static/icon/icon_2.png" style="width: 100%;margin-bottom:40rpx;margin-top: 45rpx;padding-right: 15rpx;" mode="widthFix"></image>
				</view>
				<view class="classification_right_name">
					{{choose_list.name}}
				</view>
				<view class="classification_right_list">
					<view @click="navTo(item)" v-for="(item,index) in childeList" :key="index"  class="classification_right_item">
						<u-image width="20vw" height="20vw" border-radius="8"  :src="item.pic" >
						</u-image>
						<view class="classification_right_item_title">{{item.name}}</view>
					</view>
				</view>
				
			</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				classification:[] ,//分类树
				childeList:[],
				style:{},
				choose_list:{},
			}
		},
		onShow() {
			this.getList()
			var style =  uni.getStorageSync('style')
			style = JSON.parse(style)
			this.style = style
		},
		onLoad(option) {
			var that = this
			this.$gugoApi.Index_cate_list({}).then(res=>{
				res.data.forEach((item,index)=>{
					res.data[index].isChoose = false
				})
				that.classification = res.data
				that.chooseItem(0)
			})
		},
		methods: {
			getList(){
				var that = this
				this.$gugoApi.Index_cate_list({}).then(res=>{
					var class_id = null
					var choose_index = 0
					uni.getStorage({
						key:'class_id',
						success(req) {
							res.data.forEach((item,index)=>{
								res.data[index].isChoose = false
								if(req.data == item.id){
									// console.log(index , '成功获取到参数')
									that.classification = res.data
									that.chooseItem(index)
									uni.setStorageSync('class_id' , null)
								}
							})
							
						},
						fail() {
							
						}
					})
					
					
					})
				},
			chooseItem(index){
				this.classification.forEach((item,ind)=>{
					if(ind == index){
						this.classification[ind].isChoose = true
						this.choose_list = this.classification[ind]
						this.childeList = this.classification[ind].sub?this.classification[ind].sub:[]
						// this.classification[index].pic = this.classification[index].pic.replace(/\\/g , '/')
						this.childeList.forEach((ite,key)=>{
							this.childeList[key].pic = this.childeList[key].pic.replace(/\\/g , '/')
						})
					}else{
						this.classification[ind].isChoose = false
					}
				})
			},
			navTo(item){
				uni.navigateTo({
					url:`/pages/classification/goodsList?id=${item.id}&title=${item.name}`
				})
			}
		}
	}
</script>

<style lang="scss" >
	@import url(./classification.scss);
</style>
